<template>
	
	<my-nav-bar bgType="OrangeFrostedGlass" :showBackButton="true" title="样片观赏"></my-nav-bar>
	
	<view class="previewPage">
<!-- 		<view class="imageBg" :style="[  ]">
			
		</view> -->
		<image class="imageBg" :src="ImageUrl" mode="aspectFill"></image>
	</view>
	
	<view class="bottomInfo WhiteFrostedGlass">
		<view class="ObjText"> {{ WorkObj ? WorkObj.work_name : 'loading' }} </view>
		<view class="favoriteButton" @click="onClickFavoriteButton"> <uni-icons :type="FavoriteStatus" color="pink" size="30"></uni-icons> </view>
	</view>
	
</template>

<script setup>
	import { ref, toRaw, watch, onMounted } from 'vue';
	import { BASE_URL, request } from "@/utils/request.js"
	import { SYSTEM_INFO, getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIcon } from '@/utils/system.js';
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app";
	import { toUrl } from "@/utils/page.js";
		
	const ImageUrl = ref(null);
	const WorkObj = ref(null);
	const FavoriteStatus = ref( 'heart' );
	
	const getWorkObj = async function (work_id ){
		await request( {url: `work/${work_id}`} )
			.then( res=>{
				WorkObj.value = res.data;
				console.log("workobj.value is "); console.log(WorkObj.value);
				getWorkFavoriteStatus(work_id);
			} )
	}
	//上面的.then 调用下面那个
	const getWorkFavoriteStatus = async function( work_id ){
		// if ( getApp().globalData.isLoggedIn.value === false ){
		// 	FavoriteStatus.value = "heart";
		// 	return;
		// }
		
		await request({
			url: 'work_favorite/check_status',
			method: 'POST',
			data:{
				user_open_id: getApp().globalData.UserInfoFromServer.value.open_id,
				work_id: work_id
			},
			header: { 'Content-Type': 'application/json'}
		})
		.then( res=>{
			// console.log("getWorkFavoriteStatus(): res = "); console.log(res);
			console.log("getWorkFavoriteStatus(): res.data = "); console.log(Boolean(res.data));
			FavoriteStatus.value = (res.data) ? 'heart-filled' : 'heart';
		})
	}
	
	const hintLogin = ()=>{
		console.log("un logged in");
		uni.showModal({
			title: "请先登录",
			content: "收藏功能需要先登录",
			showCancel: true,
			cancelText: "暂时不",
			confirmColor: '#3CC51F',
			success: function (res) {
			    if (res.confirm) {
			      console.log('用户点击了确定');
				  toUrl('/pages/my/my');
			    } else if (res.cancel) {
			      console.log('用户点击了取消');
			    }
			},
		})
	}
	
	const changeFavoriteStatus = async function(){
		let url;
		let completeText;
		if ( FavoriteStatus.value === 'heart' ){
			url = "work_favorite/add";
			completeText = String('已添加到收藏夹');
		} else {
			url = "work_favorite/remove";
			completeText = String('已从收藏夹移除');
		}
		
		console.log("userinfo: "); console.log(getApp().globalData.UserInfoFromServer.value);
		await request({
			url: url,
			completeText: completeText,
			isShowToast: true,
			method: "POST",
			data: {
				user_open_id: getApp().globalData.UserInfoFromServer.value.open_id,
				work_id: WorkObj.value.id
			}
		});
		await getWorkFavoriteStatus(WorkObj.value.id);
	}
	
	const onClickFavoriteButton = function(){
		console.log("onClickFavoriteButton(): ");
		if (getApp().globalData.isLoggedIn.value === false){
			console.log("onClickFavoriteButton(): NOT log in ");
			hintLogin();
			return;
		}
		
		console.log("onClickFavoriteButton(): HAS ALREADY log in ");
		
		changeFavoriteStatus();
	}
	
	onLoad((e)=>{
		// console.log("onload: e = "); console.log(e);
		ImageUrl.value = BASE_URL + `${e.tablename}/image/${e.id}`;
		// console.log("image url is : ", ImageUrl.value);  
		
		getWorkObj(e.id);
	})
	
</script>

<style lang="scss" scoped>
	.previewPage{
		position: fixed; top: 0; left: 0;
		height: 100%; width: 100%;
		.imageBg{
			border: 2px solid red;
			height: 100%; width: 100%;
		}
	}
	
	.WhiteFrostedGlass{
		background: rgba(255,255,255,0.55);
		backdrop-filter: blur(5.5px);
		box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.2); /* 水平偏移量 垂直偏移量 模糊半径 阴影颜色 */
	}
	
	.bottomInfo{
		position: fixed; bottom: 20px;
		left: 0; right: 0; margin-left: auto; margin-right: auto;
		border-radius: 20px;
		width: 80%; height: 80px;
		
		display: flex; flex-direction: row; justify-content: center; align-items: center;
		
		.ObjText{
			
		}
		.favoriteButton{
			border: 1px solid blue;
		}
	}
</style>
